<template>
    <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">

    <div class="item-container">
        <div class="header">
            <text class="text">燃气能效监测设备能耗与气温关系统计表</text>
        </div>
        <div class="cont">
            <ul class="list" v-if="show">
                <li class="listItem">
                    <text class="bold">提示分析</text>
                </li>
                <li class="listItem">
                   <text class="title">合计监测{{dataList.FORMATDATE}}天</text>
                </li>
                <li class="listItem">
                   <text class="title">平均气温{{dataList.ZDWD}}℃，平均开机户数户，{{dataList.KJHS}}户均采暖面积{{dataList.PJCNMJ}}平米，户均日用气量{{dataList.HRJL}}立方，户均平米用气量{{dataList.HPMYQL}}立方。</text>
                </li>
                <li class="listItem">
                   <text class="title">燃气用户总趋势，温度越低，日均用气量越高；{{dataItem.date_min}}气温最高{{dataItem.wd_min}}℃，户日均用气量{{dataItem.yql_min}}立方；</text>
                </li>
                <li class="listItem">
                   <text class="title">{{dataItem.date_max}}气温最低{{dataItem.wd_max}}℃，户日均用气量{{dataItem.yql_max}}立方；</text>
                </li>
            </ul>
            <ul class="list" v-if="contNull">
                <li class="listItem"><text class="title">没有符合条件的设备!</text></li>
            </ul>
        </div>
    </div>

    <div class="item-container">
        <grid :head="gridHead" :grid="gridData"/>
    </div>

    <div class="item-container">
        <bmchart :options="$format(chart)" style="flex:1;"></bmchart>
    </div>

  </wxc-tab-bar>
</template>
<script>
import wxcTabBar from '@/components/tabBar.vue'
import event from '@/net/event'
import grid from '@/components/scrollGrid'
export default {
    name: 'gasDetail',
    data () {
        return {
            tabTitles: [{title: '汇总分析'}, {title: '统计报表'}, {title: '曲线图'}],
            tabStyles: {
                bgColor: '#fff',
                titleColor: 'rgba(204,204,204,1)',
                activeTitleColor: '#fff',
                activeBgColor: 'rgba(62,175,252,1)',
                width: 250,
                height: 59,
                fontSize: 30
            },
            dataItem: {},
            dataList: {},
            gridHead: [
                { name: 'CJSJ', value: '日期'},
                { name: 'ZDWD', value: '当前气象最低温度(℃)'},
                { name: 'YQZL', value: '用气总量(立方)'},
                { name: 'KJHS', value: '开机户数'},
                { name: 'CNMJ', value: '总采暖面积'},
                { name: 'HPMYQL', value: '户日平米用气量(立方)'},
                { name: 'PJCNMJ', value: '平均采暖面积(平米)'},
            ],
            gridData: [],
            show: null,
            contNull: null,
            chart: {}
        }
    },
    components: {
        wxcTabBar,
        grid
    },
    beforeCreate() {
        this.$notice.loading.show()
        this.$navigator.setLeftItem({
            text: '   ',
            fontSize: '40',
            fontWeight: 'bold'
        }, () => {
            this.$router.back()
        })
    },
    created(){
        this.getData()
    },
    methods: {
        getData () {
            this.$router.getParams().then(resData => {
                if(resData.quyxzqhdm == '' && resData.T0GSDM == '') {
                    this.$notice.loading.hide()
                    this.show = false
                    this.contNull = true
                } else {
                    this.show = true
                    this.contNull = false
                    event.getTJ32(resData.quyxzqhdm, resData.T0JHSJMIN, resData.T0JHSJMAX, resData.T0GSDM).then(res => {
                        this.$notice.loading.hide()
                        this.dataItem = res.result.dataitem
                        this.dataList = res.result.datalist[0]
                        this.gridData = res.result.datalist
                        this.loadData()
                    })
                }
            })
        },
        loadData () {
            const data = this.gridData
            let time = []
            let backWater = []
            let waterOutlet = []
            let meter = []
            data.forEach(value => {
                time.push(value.CJSJ) // 时间
                backWater.push(value.ZDWD) // 当日气象最低温度
                waterOutlet.push(value.YQZL) // 用气总量
                meter.push(value.HPMYQL) // 户日平米用气量
            })
            this.chart = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['当日气象最低温度(℃)', '用气总量(立方)', '户日平米用气量(立方)']
                },
                grid: {
                    left: '8.5%',
                    right: '8.5%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: time
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '当日气象最低温度(℃)',
                        type: 'line',
                        data: backWater,
                        smooth: true
                    },
                    {
                        name: '用气总量(立方)',
                        type: 'line',
                        data: waterOutlet,
                        smooth: true
                    },
                    {
                        name: '户日平米用气量(立方)',
                        type: 'line',
                        data: meter,
                        smooth: true
                    }
                ]
            }
        }
    }
}
</script>
<style scoped>
.item-container {
    width: 750px;
    flex: 1;
}
.header{
    width: 750px;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.text{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.cont{
    width: 750px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
}
.list{
    width: 700px;
    border-radius: 20px;
    background-color: #fff;
}
.listItem{
    width: 700px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
}
.textRed{
    color: red;
}
.title{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(0,0,0,1);
}
.bold{
    font-size: 28px;
    font-family:PingFangSC-Regular;
    color:rgba(0,0,0,1);
}
</style>

